<template>
	<!-- 开关量 -->
	<view class="contain-main-box">
		<navigationTop navigationTitle="开关量详情" :isHome="true" :isBack="true"></navigationTop>
		<view class="main-bg">
			<view class="content-box">
				<!-- 图标左侧定位 -->
			<view class="image-position">
			<view class="deviceIcon" :style="{'background-image':'url('+ $classNameUrl(className) +')'}"></view>
			</view>
			<!-- 文字内容 -->
			<view class="text-content">
				<view class="name-switch">
					<label>名称：</label>
					<text>{{infoData.r1}}</text>
				</view>
					<view v-if="listObj" class="status-or-num">
						<view>
							<label>通信状态：</label>
							<text :class="'text-level'+listObj.status">●</text>
						</view>
						<view>
							<label>电源总数：</label>
							<text>{{listObj.total}}</text>
						</view>
					</view>
					<!-- 空开数组列 -->
					<view class="switch-list" v-if="listObj">
						<template v-for="(item,indx) in listObj.deviceDetails">
						<view v-if="indx < listObj.deviceDetails.length-1" :key="item.id" class="sw-item">
							<text :class="item.spValue=='1'?'open-switch':'close-switch'">●</text>
							<view class="deviceIcon" :style="{'background-image':'url('+ $classNameUrl(className) +')'}">
							</view>
							<label>{{item.spName}}</label>
						</view>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationTop from "@/components/navigationTop/index.vue";
	export default {
		components:{
			navigationTop
		},
		data() {
			return {
				className: 'kong',
				infoData: null,
				page: 1,
				pageSize: 10,
				total: 10,
				listObj: null
			}
		},
		onLoad(options) {
			this.infoData = JSON.parse(options.item);
			this.getData({
				...this.infoData,
				pageNo: this.page,
				pageSize: this.pageSize
			})
		},
		methods: {
			getData(data){
				uni.showLoading({
				    title: '加载中',
					mask: false
				});
				this.$http.httpRequest({
					url: this.$api.deviceDetails,
					methods: "get",
					data: data,
					abort: true //可中断后续请求
				}).then(res=>{
					uni.hideLoading();
					this.listObj = res.data;
				})
			}	
		}
	}
</script>

<style lang="scss" scoped>
.main-bg{
	padding: 80rpx 30rpx;
	background: rgba(255,255,255,0.9);
	min-height: inherit;
}
.content-box{
	box-shadow: $card-box-shadow;
	border-radius: $card-box-radius;
	min-height: 100%;
	padding: 25rpx;
	position: relative;
}
.image-position{
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	box-shadow: $card-box-shadow;
	position: absolute;
	top: -50rpx;
	left: 35rpx;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.deviceIcon {
	width: 64rpx;
	height: 55rpx;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	position: relative;vertical-align: middle;
}	
.name-switch,.status-or-num{
	padding-left: 230rpx;
}
.switch-list{
	padding-left: 28rpx;
	.sw-item{
		margin: 10rpx 0;
	}
	text{
		height: 55rpx;
		line-height: 55rpx;
		display: inline-block;
	}
	label{
		display: inline-block;
		height: 55rpx;
		line-height: 55rpx;
	}
}
</style>
